<template>
    <SlotSon>
        <!-- <template #default> -->
        <template #>
            在里面写插槽内容
            <el-divider />
            defult为默认插槽名可以省略
            <el-divider />
            <el-button type="primary" @click="toSlot('https://cn.vuejs.org/guide/components/slots.html#slot-content-and-outlet')">彩笔传送门</el-button>
            <el-divider />
            父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域
            <el-divider />
            ---{{ text }}---
        </template>

        <!-- <template v-slot:main> -->
        <template #main="props">
            多个插槽方案--具名插槽
            写法: v-slot:name 或者 #name
            <el-divider />
            {{props.sayhi}}
        </template>

        <!-- <p>当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容</p> -->

        <template v-slot:[slotName]>
            动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告
        </template>

    </SlotSon>
    <SlotSon v-slot="slotProps">
            默认插槽接收数据的写法：{{slotProps.text}}{{slotProps.count}}
            <el-divider />
            name是保留字，在具名插槽会使用的
    </SlotSon>
</template>
    
<script setup lang="ts">
import { defineExpose, defineProps, defineEmits, ref } from 'vue'
import SlotSon from './slotSon.vue'

const text = ref<string>('我是父组件数据')
const slotName = ref<any>('footer')
const toSlot = (url:string):void=>{
  window.location.href = url
}

</script>
<style scoped>

</style>
